<script>
  import PhoneElement from './../../../blank/templates/elements/PhoneElement.vue'

  export default {
    name: 'PhoneElement',
    render: PhoneElement.render,
    data() {
      return {
        merge: true,
        defaultClasses: {
          container: 'vf-text-type',
          inputContainer: 'vf-input-group',
          inputContainer_sm: 'vf-input-group-sm',
          inputContainer_md: '',
          inputContainer_lg: 'vf-input-group-lg',
          inputContainer_default: '',
          inputContainer_disabled: 'vf-input-group-disabled',
          inputContainer_focused: 'vf-input-group-focused',
          inputContainer_success: 'vf-input-group-success',
          inputContainer_danger: 'vf-input-group-danger',
          input: 'vf-input-field',
          input_sm: '',
          input_md: '',
          input_lg: '',
          input_enabled: '',
          input_disabled: '',
          input_focused: '',
          input_success: '',
          input_danger: '',
          optionsWrapper: 'vf-phone-options-wrapper',
          optionsWrapper_sm: 'vf-phone-options-wrapper-sm',
          optionsWrapper_md: '',
          optionsWrapper_lg: 'vf-phone-options-wrapper-lg',
          optionWrapper: '',
          option: 'vf-phone-option',
          option_active: 'vf-phone-option-active',
          optionWrapper: 'vf-phone-option-wrapper',
          flag: 'vf-phone-flag',
          country: 'vf-phone-country',
          number: 'vf-phone-number',
          placeholder: 'vf-phone-flag vf-phone-flag-placeholder',
          $optionsWrapper: (classes, { Size }) => ([
            classes.optionsWrapper,
            classes[`optionsWrapper_${Size}`],
          ]),
          $option: (classes) => (active) => ([
            classes.option,
            active ? classes.option_active : null,
          ]),
          $inputContainer: (classes, { isDisabled, Size, isSuccess, isDanger, focused }) => ([
            classes.inputContainer,
            classes[`inputContainer_${Size}`],
            isDisabled ? classes.inputContainer_disabled : null,
            !isDisabled && !isSuccess && !isDanger ? classes.inputContainer_default : null,
            !isDisabled && focused ? classes.inputContainer_focused : null,
            !isDisabled && isSuccess ? classes.inputContainer_success : null,
            !isDisabled && isDanger ? classes.inputContainer_danger : null,
          ]),
          $input: (classes, { isDisabled, Size, isSuccess, isDanger, focused }) => ([
            classes.input,
            classes[`input_${Size}`],
            isDisabled ? classes.input_disabled : null,
            !isDisabled && !isSuccess && !isDanger && !focused  ? classes.input_enabled : null,
            !isDisabled && focused && !isSuccess && !isDanger ? classes.input_focused : null,
            !isDisabled && isDanger ? classes.input_danger : null,
            !isDisabled && isSuccess ? classes.input_success : null,
          ]),
        }
      }
    },
  }
</script>

<style lang="scss">
  /* Some styles are contained in Vueform.vue */

  .vf-phone-option {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0.3125rem 0.75rem;
    white-space: nowrap;
  }

  .vf-phone-option-active {
    background: var(--vf-bg-selected);
  }

  .vf-phone-options-wrapper {
    display: flex;
    align-items: center;
    margin-left: var(--vf-px-input);

    &.vf-phone-options-wrapper-sm {
      margin-left: var(--vf-px-input-sm);
    }

    &.vf-phone-options-wrapper-lg {
      margin-left: var(--vf-px-input-lg);
    }
  }

  .vf-phone-option-wrapper {
    display: flex;
    align-items: center;
  }

  .vf-phone-flag {
    background: no-repeat 0 0;
    background-image: url('');
    background-size: 24px 4716px;
    width: 24px;
    height: 16px;
    overflow: hidden;
  }

  .vf-phone-flag-placeholder {
    opacity: 0.6;
  }

  .vf-phone-country {
    margin-left: 0.75rem;
    font-weight: 600;
    font-size: 15px;
    display: flex;
  }

  .vf-phone-number {
    margin-left: 0.5rem;
    color: var(--vf-color-muted);
  }

  [dir="rtl"] {
    .vf-addon-options-wrapper {
      margin-left: 0;
      margin-right: var(--vf-px-input);

      &.vf-addon-options-wrapper-sm {
        margin-left: 0;
        margin-right: var(--vf-px-input-sm);
      }

      &.vf-addon-options-wrapper-lg {
        margin-left: 0;
        margin-right: var(--vf-px-input-lg);
      }
    }

     .vf-phone-country {
      margin-left: 0;
      margin-right: 0.75rem;
    }

     .vf-phone-number {
      margin-left: 0;
      margin-right: 0.5rem;
    }
  }
</style>